<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../../set.jsp" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>编辑平台</title>
<jsp:include page="../../cite.jsp" />
<link rel="stylesheet" href="${_path}/theme/theme-menu.css">
<link rel="stylesheet" href="${_path}/theme/tree.css">
<script src="${_path}/lib/bootbox-4.4.0/bootbox.min.js"></script>
<script src="${_path}/lib/loong/loong-tree.js"></script>
<style>
.body {
	padding-top: 40px;
}

.body .panel {
	width: 600px;
	margin: 0 auto 30px;
}

.body .tree li>.btn {
	min-width: 22px;
}

.modal#modal .modal-body {
	padding-top: 30px;
}
</style>
</head>
<body>
	<jsp:include page="../../header.jsp" />
	<jsp:include page="./compile-menu.jsp?active=codes" />
	<div class="body">
		<div class="panel panel-default">
			<div class="panel-body">
				<div class="btn-group btn-group-sm">
					<a href="javascript:;" class="btn btn-default" id="expand">
						<i class="fa fa-plus"></i>
						展开
					</a>
					<a href="javascript:;" class="btn btn-default" id="collapse">
						<i class="fa fa-minus"></i>
						折叠
					</a>
				</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">代码集</div>
			<div class="panel-body">
				<div class="tree tree-sm" id="tree">
					<ul>
						<c:forEach var="code" items="${codes}">
							<li value="${code.type}">
								<a href="javascript:;" class="btn btn-primary btn-sm node">${code.name}</a>
								<a href="javascript:;" class="btn btn-info btn-xs row-add" title="添加" data-toggle="tooltip">
									<i class="fa fa-plus"></i>
								</a>
								<ul>
									<c:forEach varStatus="i" var="c" items="${code.cs}">
										<li value="${c.id}">
											<a href="javascript:;" class="btn btn-warning btn-sm node" title="编辑" data-toggle="tooltip">${c.name}</a>
											<a href="javascript:;" class="btn btn-success btn-sm disabled">值：${c.value}</a>
											<a href="javascript:;" class="btn btn-info btn-xs row-insert" title="插入" data-toggle="tooltip">
												<i class="fa fa-arrow-left"></i>
											</a>
											<a href="javascript:;" class="btn btn-info btn-xs row-up" title="上移" data-toggle="tooltip">
												<i class="fa fa-long-arrow-up"></i>
											</a>
											<a href="javascript:;" class="btn btn-info btn-xs row-down" title="下移" data-toggle="tooltip">
												<i class="fa fa-long-arrow-down"></i>
											</a>
											<a href="javascript:;" class="btn btn-danger btn-xs row-remove" title="删除" data-toggle="tooltip">
												<i class="fa fa-minus"></i>
											</a>
										</li>
									</c:forEach>
								</ul>
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="modal" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<a class="close" data-dismiss="modal" href="javascript:;">
						<i class="fa fa-close"></i>
					</a>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="form">
						<div class="form-group form-group-sm">
							<label class="col-sm-2 control-label" for="name">名称：</label>
							<div class="col-sm-9">
								<input class="form-control" name="name" required>
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-sm-2 control-label" for="value">值：</label>
							<div class="col-sm-9">
								<input class="form-control" name="value" required>
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-sm-2 control-label" for="site">位置：</label>
							<div class="col-sm-9">
								<input class="form-control" name="site" readonly>
							</div>
						</div>
						<input type="hidden" name="before">
						<input type="hidden" name="type">
						<input type="hidden" name="id">
					</form>
				</div>
				<div class="modal-footer">
					<a href="javascript:;" class="btn btn-default btn-sm" data-dismiss="modal">关 闭</a>
					<button class="btn btn-primary btn-sm" data-loading-text="提交中..." id="submit">修 改</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			bootbox.setLocale('zh_CN');
			$('#modal').on('hidden.bs.modal', function(e) {
				clearModel();
			});
			$('#tree').tree(function(obj) {
				get($(obj).parent().attr('value'));
			});
			$('#collapse').bind('click', function() {
				$('#tree').tree('collapse');
			});
			$('#expand').bind('click', function() {
				$('#tree').tree('expand');
			});
			$('#tree a.row-add').bind('click', function() {
				var type = $(this).parent().attr('value');
				addModel(type);
			});
			$('#tree a.row-insert').bind('click', function() {
				var li = $(this).parent();
				var type = li.parent().parent().attr('value');
				var before = li.attr('value');
				var site = li.children('.node').text();
				addModel(type, before, site);
			});
			$('#tree a.row-up').bind('click', function() {
				var li = $(this).parent();
				var pre = li.prev();
				order(pre, li);
			});
			$('#tree a.row-down').bind('click', function() {
				var li = $(this).parent();
				var next = li.next();
				order(li, next);
			});
			$('#tree a.row-remove').bind('click', function() {
				remove($(this).parent());
			});
			$('#submit').bind('click', function() {
				$('#form').submit();
			});
			$('#form').submit(function() {
				if (check()) {
					edit();
				}
				return false;
			});
			function check() {
				var succ = true;
				$('#form .has-error').removeClass('has-error');
				$('#form input[required]').each(function() {
					if ($(this).val().length == 0) {
						succ = false;
						$(this).parent().parent().addClass('has-error');
					}
				});
				if (!succ)
					return false;
				if (!$.isNumeric($('#form input[name=value]').val())) {
					bootbox.alert('值必须为数字');
					succ = false;
				}
				return succ;
			}
			function get(id) {
				$.ajax({
					url : './get/',
					type : 'post',
					dataType : 'json',
					data : {
						id : id
					},
					success : function(result) {
						if (result.succ == 0)
							editModel(result.data);
						else
							bootbox.alert(result.message);
					},
					error : function() {
						bootbox.alert('网络连接失败');
						console.log('获取代码信息失败');
					}
				});
			}
			function edit() {
				var id = $('#form input[name=id]').val();
				var type = $('#form input[name=type]').val();
				var name = $('#form input[name=name]').val();
				var value = $('#form input[name=value]').val();
				var before = $('#form input[name=before]').val();
				$('#modal button[data-loading-text]').button('loading');
				$.ajax({
					url : './edit/',
					type : 'post',
					dataType : 'json',
					data : {
						id : id,
						value : value,
						name : name,
						type : type,
						before : before
					},
					success : function(result) {
						if (result.succ == 0) {
							if (id.length == 0)
								addNode(result.data);
							else
								editNode();
							$('#modal').modal('hide');
						} else {
							bootbox.alert(result.message);
						}
						$('#modal button[data-loading-text]').button('reset');
					},
					error : function() {
						bootbox.alert('网络连接失败');
						$('#modal button[data-loading-text]').button('reset');
						console.log('编辑代码信息失败');
					}
				});
				function addNode(id) {
					var a_node = $('<a></a>').bind('click', function() {
						get($(this).parent().attr('value'));
					}).addClass('btn btn-warning btn-sm node').text(name).attr('title', '编辑');
					var a_value = $('<a></a>').addClass('btn btn-success btn-sm disabled').text('值：' + value);
					var a_insert = $('<a></a>').bind('click', function() {
						var li = $(this).parent();
						var type = li.parent().parent().attr('value');
						var before = li.attr('value');
						var site = li.children('.node').text();
						addModel(type, before, site);
					}).addClass('btn btn-info btn-xs row-insert').append('<i class="fa fa-arrow-left"></i>').attr('title', '插入');
					var a_up = $('<a></a>').bind('click', function() {
						var li = $(this).parent();
						var pre = li.prev();
						order(pre, li);
					}).addClass('btn btn-info btn-xs row-up').append('<i class="fa fa-long-arrow-up"></i>').attr('title', '上移');
					var a_down = $('<a></a>').bind('click', function() {
						var li = $(this).parent();
						var next = li.next();
						order(li, next);
					}).addClass('btn btn-info btn-xs row-down').append('<i class="fa fa-long-arrow-down"></i>').attr('title', '下移');
					var a_remove = $('<a></a>').bind('click', function() {
						remove($(this).parent());
					}).addClass('btn btn-danger btn-xs row-remove').append('<i class="fa fa-minus"></i>').attr('title', '删除');
					var li = $('<li></li>').attr('value', id).append(a_node).append(a_value).append(a_insert).append(a_up).append(a_down).append(
							a_remove);
					$(li).children().tooltip({
						trigger : 'hover'
					}).each(function() {
						$(this).after(' ');
					});
					var tree = $('#tree>ul>li[value=' + type + ']');
					if (before.length == 0) {
						tree.children('ul').append(li);
					} else {
						tree.children('ul').children('li[value=' + before + ']').before(li);
					}
					tree.tree('expand');
				}
				function editNode() {
					$('#tree>ul>li>ul>li[value=' + id + ']>a.node').text(name);
				}
			}
			function remove(li) {
				var name = li.children('a.node').text();
				bootbox.confirm('您确认要删除代码：' + name + '？', function(c) {
					if (c)
						$.ajax({
							url : './remove/',
							type : 'post',
							dataType : 'json',
							data : {
								id : li.attr('value')
							},
							success : function(result) {
								if (result.succ == 0) {
									li.remove();
								} else {
									bootbox.alert(result.message);
								}
							},
							error : function() {
								bootbox.alert('网络连接失败');
								console.log('删除代码信息失败');
							}
						});
				});
			}
			function order(li, oli) {
				var v = li.attr('value'), ov = oli.attr('value');
				if (v == null || ov == null)
					return;
				$.ajax({
					url : './exchange/',
					type : 'post',
					dataType : 'json',
					data : {
						id : v,
						oid : ov
					},
					success : function(result) {
						if (result.succ == 0) {
							oli.fadeOut('fast', function() {
								oli.fadeIn('fast');
							});
							li.fadeOut('fast', function() {
								oli.after(li);
								li.fadeIn('fast');
							});
						} else
							bootbox.alert(result.message);
					},
					error : function() {
						bootbox.alert('网络连接失败');
						console.log('编辑代码信息失败');
					}
				});
			}
			function addModel(type, before, site) {
				$('#form input[name=type]').val(type);
				if (before != null)
					$('#form input[name=before]').val(before);
				if (site != null)
					$('#form input[name=site]').val(site);
				$('#form input[name=value]').attr('readonly', false);
				$('#submit').text('添 加');
				$('#modal').modal('show');
			}
			function editModel(data) {
				$('#form input[name=id]').val(data.id);
				$('#form input[name=name]').val(data.name);
				$('#form input[name=value]').attr('readonly', true).val(data.value);
				$('#form input[name=site]').val(data.name);
				$('#submit').text('修 改');
				$('#modal').modal('show');
			}
			function clearModel() {
				$('#form input[name=id]').val('');
				$('#form input[name=type]').val('');
				$('#form input[name=name]').val('');
				$('#form input[name=value]').val('');
				$('#form input[name=before]').val('');
				$('#form input[name=site]').val('');
				$('#form .has-error').removeClass('has-error');
			}
		});
	</script>
</body>
</html>